<template>
	<!-- <view>
		选中的服务value：{{ selectedServiceValue }}
	</view> -->
	<view class="top-container">
	</view>


	<!-- 订单详情区域 -->
	<view class="order-detail">
		<!-- 选项卡区域 -->
		<view class="steps">
			<view class="step">
				<image src="/static/images/矩形 4.png" class="step-icon" alt="预约服务"></image>
				<text class="step-text">预约服务</text>
			</view>
			<view class="connector"></view>
			<view class="step">
				<image src="/static/images/矩形 4 拷贝.png" class="step-icon" alt="支付订单"></image>
				<text class="step-text">支付订单</text>
			</view>
			<view class="connector"></view>
			<view class="step">
				<image src="/static/images/矩形 4 拷贝 2.png" class="step-icon" alt="门店服务"></image>

				<text class="step-text">门店服务</text>
			</view>
		</view>
		<!-- 门店信息 -->
		<view class="order-item1">
			<image class="icon" src="/static/images/商家.png"></image>
			<view class="item-content" style="margin-left: 10rpx;">
				<text class="store-name">{{ storeInfo.name }}</text>
				<text class="store-address">{{ storeInfo.address }}</text>
			</view>
		</view>

		<!-- 用户信息 -->
		<view class="order-item">
			<view class="left">
				<image class="icon" src="/static/images/人员.png"></image>
				<view class="item-label1">{{ userInfo.name }}</view>
			</view>
			<view class="item-label">{{ userInfo.phone }}</view>
		</view>

		<!-- 车辆信息 -->
		<view class="order-item">
			<view class="left">
				<image class="icon" src="/static/images/车辆-01.png"></image>
				<view class="item-label1">{{ carInfo.model }}/{{ carInfo.plate }}</view>
			</view>
			<image class="icon1" src="/static/images/收起箭头小 拷贝.png"></image>
		</view>

		<!-- 服务产品 -->
		<view class="order-item" style="margin-top: 80rpx;">
			<text class="item-label">服务产品</text>
			<view class="item-content service-content">
				共选择<text style="color:#4D9CFF ;">1项</text>服务产品
			</view>
		</view>
		<view class="order-item">

			<view class="item-content service-content">
				<text class="service-name">{{ serviceInfo.name }}</text>
				<text class="service-price">¥{{ serviceInfo.price }}</text>
			</view>
		</view>

		<!-- 优惠信息 -->
		<view class="order-item">
			<view class="left">
				<image class="icon" src="/static/images/优惠券.png"></image>
				<view class="coupon-name">{{ coupon.name }}</view>
			</view>
			<view class="right">
				<view class="coupon-discount">-¥{{ coupon.discount }}</view>
				<image class="icon1" src="/static/images/收起箭头小 拷贝.png"></image>
			</view>

		</view>

		<!-- 合计金额 -->
		<view class="order-total">
			<text class="total-label">合计:</text>
			<text class="total-price">¥{{ totalPrice }}</text>
		</view>
	</view>

	<!-- 底部操作栏 -->
	<view class="bottom-bar">
		<view class="contact-service" @click="toggle('bottom')">
			<image class="service-icon" src="/static/images/客服.png" mode="widthFix"></image>
			<text>联系客服</text>
		</view>
		<view class="order-btn" @click="handleSubmitOrder">提交订单</view>
	</view>
	<view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="text">15031324789</view>
				<view class="text">复制</view>
				<view class="text">取消拨号</view>
			</view>
		</uni-popup>
	</view>

	<!-- 支付密码弹窗 -->
	<view class="pay-popup" v-if="isPayPopupShow">
		<!-- 遮罩层：点击关闭弹窗 -->
		<view class="pay-mask" @click="closePayPopup"></view>
		<!-- 弹窗内容 -->
		<view class="pay-content">
			<view class="pay-header">
				<view class="close-icon" @click="closePayPopup">×</view>
				<view class="pay-title">请输入支付密码</view>
			</view>
			<view class="pay-platform">车辆服务平台</view>
			<view class="pay-amount">¥{{ totalPrice }}</view>
			<view class="pay-method">
				<text>支付方式</text>
				<text class="method-text">零钱</text>
				<image src="/static/images/收起箭头小.png" class="arrow-icon"></image>
			</view>
			
			<!-- 支付密码输入 -->
			<view class="pay-password" @click="focusInput">
				<view v-for="(item,index) in 6" :key="index" class="pwd-box">
					<text v-if="payPassword.length > index">●</text>
				</view>
				<!-- 隐藏的真实输入框 -->
				<input type="number" maxlength="6" v-model="payPassword" class="real-input" ref="realInput"
					@input="handlePasswordInput" />
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isPayPopupShow: false, // 支付弹窗默认隐藏
				selectedServiceValue: null,
				activeTab: 0, // 默认选中"预约服务"选项卡
				// 门店信息（图2所示数据）
				storeInfo: {
					name: "伟业汽车美容店(人民路店)",
					address: "山阳区人民中路33号"
				},
				// 用户信息（图2所示数据）
				userInfo: {
					name: "张先生",
					phone: "18656894566"
				},
				// 车辆信息（图2所示数据）
				carInfo: {
					model: "奔驰FWE4",
					plate: "豫A56487"
				},
				// 服务信息（接收上一页传递的serviceValue，匹配对应服务）
				serviceInfo: {
					name: "精洗汽车",
					price: 39.9
				},
				// 优惠信息（图2所示数据）
				coupon: {
					name: "代金券/优惠券",
					discount: 10
				},
				totalPrice: 0, // 合计金额（动态计算）
				type: "", // 弹窗方向// 存储接收的服务value
				payPassword: '',
			}
		},
		onLoad(options) {
			// options中包含上一页传递的所有参数（key为url中的参数名）
			this.selectedServiceValue = options.serviceValue;
			console.log('接收的服务value：', this.selectedServiceValue);
			// 后续可根据该value查询服务名称、价格等（如匹配service数组）
			// 根据serviceValue匹配服务（可扩展更多服务类型）
			this.matchService(Number(this.selectedServiceValue));
			// 计算合计金额
			this.calculateTotal();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			// 根据serviceValue匹配服务名称和价格
			matchService(serviceValue) {
				const serviceList = [{
						name: "普通洗车",
						price: 25.9
					},
					{
						name: "精洗汽车",
						price: 39.9
					}, // 图2所示精洗价格
					{
						name: "内饰清洗",
						price: 89.9
					},
					{
						name: "其他清洗",
						price: 59.9
					}
				];
				this.serviceInfo = serviceList[serviceValue] || serviceList[1];
			},
			// 计算合计金额（服务价格 - 优惠金额）
			calculateTotal() {
				this.totalPrice = (this.serviceInfo.price - this.coupon.discount).toFixed(1);
				// 若优惠后金额为负数，强制设为0（防异常）
				if (this.totalPrice < 0) this.totalPrice = 0;
			},
			// 点击提交订单 → 显示支付弹窗
			handleSubmitOrder() {
				this.isPayPopupShow = true;
			},
			// 关闭支付弹窗
			closePayPopup() {
				this.isPayPopupShow = false;
			},
			handlePasswordInput() {
				if (this.payPassword.length === 6) {
					console.log('密码输入完成，即将跳转');
					// 跳转到目标页面（示例：订单成功页，需替换为实际路径）
					uni.navigateTo({
						url: '/professional-car-wash/pages/pay-success/pay-success'
						// 若需传参，可拼接：url: '/pages/order-success/order-success?orderNo=12345'
					});
				}
			}
		}
	}
</script>

<style>
	.top-container {
		background-color: #2176F3;
		height: 350rpx;
	}

	/* 页面整体容器 */
	.page-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 120rpx;
		/* 给底部操作栏留空间 */
	}

	.steps {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中（可根据需求调整） */
		margin-top: 50rpx;
		padding: 0 30rpx;
		margin-bottom: 80rpx;
	}

	/* 每个步骤项（图标+文字） */
	.step {
		display: flex;
		flex-direction: column;
		/* 图标在上，文字在下 */
		align-items: center;
		position: relative;
	}

	/* 步骤图标（根据实际图片调整大小） */
	.step-icon {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		/* 若图片不是圆形，用这个让它变圆 */
		display: block;
		/* 消除图片底部间隙 */
	}

	/* 步骤文字 */
	.step-text {
		position: absolute;
		/* 脱离文档流，相对于.step定位 */
		top: 50%;
		/* 垂直居中 */
		left: 50%;
		/* 水平居中 */
		transform: translate(-50%, -50%);
		/* 精准居中（抵消自身宽高） */
		margin-top: 0;
		/* 取消原有的顶部间距 */
		margin-left: 4rpx;
		font-size: 12px;
		/* 缩小文字，避免超出图片 */
		color: #fff;
		/* 文字设为白色，在图片上更清晰（根据图片颜色调整） */

	}

	/* 步骤间的虚线 */
	.connector {
		flex: 1;
		/* 自动填充步骤间的空间 */
		height: 1px;
		background: none;
		border-top: 1px dashed #999;
		/* 虚线样式 */
		margin: 0 15px;
		/* 虚线左右的间距 */
	}

	.icon {
		height: 30rpx;
		width: 30rpx;
	}

	.icon1 {
		height: 20rpx;
		width: 20rpx;
	}

	.left {
		display: flex;
		line-height: 20rpx;
	}

	.right {
		display: flex;
		line-height: 20rpx;
	}

	/* 订单详情区域 */
	.order-detail {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 20rpx;
		margin-top: -350rpx;
	}

	.order-item {
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.order-item1 {
		margin-bottom: 30rpx;
		display: flex;

	}

	.item-label {
		font-size: 24rpx;
		color: #999;
		display: block;
		margin-bottom: 10rpx;
	}

	.item-label1 {
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.item-content {
		font-size: 28rpx;
		color: #333;

	}

	.store-address,
	.user-phone,
	.car-plate {
		display: block;
		margin-top: 8rpx;
		color: #666;
	}

	/* 服务产品/优惠信息 左右对齐样式 */
	.service-content,
	.coupon-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.service-price {
		margin-left: 10rpx;
		color: #f5442c;
		font-size: 24rpx;
		/* 价格红色（与原页面一致） */
	}

	.coupon-name {
		font-size: 20rpx;
		margin-left: 10rpx;
	}

	.coupon-discount {
		margin-right: 20rpx;
		font-size: 24rpx;
		color: #f5442c;
	}

	/* 合计金额样式 */
	.order-total {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1rpx solid #eee;
		padding-top: 20rpx;
		margin-top: 10rpx;
	}

	.total-label {
		font-size: 28rpx;
		font-weight: bold;
	}

	.total-price {
		font-size: 32rpx;
		font-weight: bold;
		color: #f5442c;
	}

	/* 底部操作栏（复用原页面样式，调整按钮文字） */
	.bottom-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-top: 1px solid #eee;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.contact-service {
		display: flex;
		align-items: center;
	}

	.service-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.submit-btn {
		background-color: #2176F3;
		/* 蓝色按钮（与原页面一致） */
		color: #fff;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	/* 客服弹窗样式（复用原页面样式） */
	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 15px;
		background-color: #fff;
	}

	.popup-height {
		height: 100%;
		width: 200px;
	}

	.text {
		font-size: 28rpx;
		color: #333;
		line-height: 80rpx;
		border-bottom: 1rpx solid #F3F3F3;
		width: 100%;
	}

	.text:last-child {
		border-bottom: none;
	}

	.order-btn {
		background-color: #2176F3;
		color: #fff;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	/* 支付弹窗整体 */
	.pay-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		/* 保证在最上层 */
	}

	/* 遮罩层（半透明） */
	.pay-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	/* 弹窗内容容器 */
	.pay-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* 水平+垂直居中 */
		background-color: #fff;
		width: 600rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	/* 弹窗头部（标题+关闭按钮） */
	.pay-header {
		display: flex;

		align-items: center;
		margin-bottom: 20rpx;
	}

	.close-icon {
		font-size: 36rpx;
		color: #999;
	}

	.pay-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 120rpx;
	}

	/* 平台名称 */
	.pay-platform {
		text-align: center;
		color: #999;
		font-size: 24rpx;
		margin-bottom: 10rpx;
	}

	/* 支付金额 */
	.pay-amount {
		text-align: center;
		font-size: 48rpx;
		color: #333;
		margin-bottom: 30rpx;
	}

	/* 支付方式 */
	.pay-method {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		margin-bottom: 40rpx;
	}

	.method-text {
		color: #999;
		margin-left: 200rpx;
	}

	.arrow-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.pay-password {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 0 20rpx;
	  margin-top: 20rpx;
	  position: relative;
	}
	
	.pwd-box {
	  width: 80rpx;
	  height: 80rpx;
	  border: 1rpx solid #ddd;
	  border-radius: 8rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 36rpx;
	}
	
	.real-input {
	  position: absolute;
	  opacity: 0;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	}
</style>